<template>
  <div>
    <el-row>
      <el-col>
        <el-card>
          <div class="top-card">
            <div>你好，admin</div>
            <div class="div-item">
              <div class="span-item">
                <h3>每日新增房源</h3>
                <p>{{ homeCount }}</p>
              </div>
              <div class="span-item">
                <h3>每日注册用户</h3>
                <p>{{ userCount }}</p>
              </div>
              <div class="span-item">
                <h3>每日新增交易量</h3>
                <p>{{ orderCount }}</p>
              </div>
              <div class="span-item">
                <h3>每日新增评论</h3>
                <p>{{ commentCount }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card class="card-item" :body-style="{ padding: 0, height: 260 }">
          <div
            ref="main2"
            style="
              width: 100%;
              height: 300px;
              display: inline-block;
              margin-top: 20px;
            "
          ></div>

          <!-- <ul class="ul-system">
            <li style="color: skyblue">通知公告</li>
            <li>
              <span style="color: #337ecc; font-size: 14px; font-weight: 500"
                >1111</span
              ><span style="font-size: 14px; font-weight: 300">在</span>
              <span style="color: #999; font-size: 14px; font-weight: 500"
                >2023-03-21 00:00:00</span
              >
              <span style="font-size: 14px; font-weight: 300">支付了订单</span>
            </li>
            <li>111111</li>
            <li>111111</li>
            <li>111111</li>
          </ul> -->
        </el-card>
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="12">
            <el-card
              ><div style="width: 100%; height: 300px" ref="main1"></div
            ></el-card>
          </el-col>
          <el-col :span="12">
            <el-card
              ><div style="width: 100%; height: 300px" ref="main3"></div
            ></el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-card class="card-ul">
          <template #header>
            <span>热门房源</span>
          </template>
          <ul class="ul-item">
            <li v-for="item in hotArr" :key="item">
              <div class="imgbox">
                <img
                  :src="
                    'http://127.0.0.1:8090/public/homestay/' +
                    item.photos.split(',')[0]
                  "
                  style="width: 100%; height: 100%"
                />
              </div>
              <div class="textbox">
                <div class="title">{{ item.title }}</div>
                <span class="address">{{ item.address }}</span>
                <div class="hostname">
                  <span>{{ item.username }}</span>

                  <div style="padding-right: 10px">
                    <SvgIcon
                      :icon-class="`icon-fire2`"
                      style="margin-right: 5px"
                    ></SvgIcon
                    >{{ item.hot }}
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import SvgIcon from "../../components/SvgIcon/index.vue";
import {
  getDayHomestay,
  getDayOrder,
  getDayUser,
  getUserByDay,
  getHotHomestay,
  getOrderByDay,
  getCommentByDay,
  getSystemOrder,
  getHomestayType,
} from "../../api/visibleTable/index";
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const main1 = ref();
const initLineCharts = () => {
  var myChart = echarts.init(main1.value);
  var option = {
    xAxis: {
      type: "category",
      data: day.value,
    },
    yAxis: {
      type: "value",
    },
    title: [
      {
        left: "center",
        text: "每日新增用户数",
      },
    ],
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        data: userArr.value,
        type: "line",

        itemStyle: {
          normal: {
            areaStyle: {
              type: "default",
              //渐变色实现===
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                //三种由深及浅的颜色
                [
                  {
                    offset: 0,
                    color: "#79bbff",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ]
              ),
            },
            lineStyle: {
              //线的颜色
              color: "#337ecc",
            },
            //以及在折线图每个日期点顶端显示数字
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "white",
              },
            },
          },
        },
      },
    ],
  };
  myChart.setOption(option);
};
const main2 = ref();
const initShadowEcharts = () => {
  var myChart = echarts.init(main2.value);
  // prettier-ignore
  let dataAxis = orderDay.value
  // prettier-ignore
  let data = orderDayCount.value
  let yMax = 500;
  let dataShadow = [];

  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
  }

  var option = {
    title: {
      text: "每日新增订单",
      left: "center",
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: true,
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      z: 10,
    },
    yAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#999",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    dataZoom: [
      {
        type: "inside",
      },
    ],
    series: [
      {
        type: "bar",
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2378f7" },
              { offset: 0.7, color: "#2378f7" },
              { offset: 1, color: "#83bff6" },
            ]),
          },
        },
        data: data,
      },
    ],
  };
  // Enable data zoom when user click bar.
  const zoomSize = 6;
  myChart.on("click", function (params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    myChart.dispatchAction({
      type: "dataZoom",
      startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue:
        dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
    });
  });
  myChart.setOption(option);
};

const main3 = ref();
const initPieCharts = () => {
  var myChart = echarts.init(main3.value);
  var option = {
    title: {
      text: "房源类型占比",
      left: "center",
    },
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: homeType.value,
      },
    ],
  };
  myChart.setOption(option);
};

const homeCount = ref<number>();
const userCount = ref<number>();
const orderCount = ref<number>();
const commentCount = ref<number>();
const day = ref<any>([]);
const userArr = ref<any>([]);
const hotArr = ref<any>([]);
const orderDay = ref<any>([]);
const orderDayCount = ref<any>([]);
const homeType = ref<any>([]);
const onLoad = async () => {
  const r1 = await getDayHomestay();
  const r2 = await getDayUser();
  const r3 = await getDayOrder();

  homeCount.value = r1.data.data[0].count;
  userCount.value = r2.data.data[0].count;
  orderCount.value = r3.data.data[0].count;

  const r4 = await getUserByDay();
  r4.data.data.forEach((item: any) => {
    day.value.push(item.DAY);
    userArr.value.push(item.count);
  });

  const r5 = await getHotHomestay();
  hotArr.value = r5.data.data;

  const r6 = await getOrderByDay();
  r6.data.data.forEach((item: any) => {
    orderDay.value.push(item.DAY);
    orderDayCount.value.push(item.count);
  });

  const r7 = await getCommentByDay();
  commentCount.value = r7.data.data[0].count;

  const r8 = await getHomestayType();
  homeType.value = r8.data.data;
};
onMounted(async () => {
  await onLoad();
  initLineCharts();
  initShadowEcharts();
  initPieCharts();
});
</script>

<style lang="scss" scoped>
.top-card {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .div-item {
    display: flex;
    .span-item {
      display: inline-block;
      width: 200px;
      text-align: center;
      border-right: 1px #cbc9c9 solid;
      h3 {
        color: #337ecc;
      }
    }

    .span-item:last-child {
      border: none;
    }
  }
}
::v-deep.card-ul {
  padding: 0 0 10px 0;
}
.ul-item {
  margin-top: 0;
  width: 100%;
  list-style: none;
  padding: 0;

  li {
    width: 100%;
    height: 100px;
    float: left;
    display: flex;
    padding: 2px;
    .imgbox {
      width: 25%;
    }
    .textbox {
      padding-left: 10px;
      width: 75%;

      display: flex;
      flex-direction: column;
      .title {
        height: 50px;
        line-height: 50px;
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        color: #337ecc;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .address {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #6f6d6d;
      }
      .hostname {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.ul-system {
  float: right;
  width: 28%;
  height: 300px;
  display: inline-block;
  margin-top: 20px;
  margin-right: 10px;
  list-style: none;
  padding: 0;
  li {
    padding: 5px;
    height: 50px;
    border-bottom: 1px solid #efefef;
    line-height: 50px;
  }
}
// .icon {
//   background: #337ecc;
// }
</style>
